<template>
  <div>
    <button
      v-for="(item, index) in navs"
      :key="index"
      :class="{ active: activeName = item.tab}"
      @click="changeNav(item)"
    >
      {{ item.title }}
    </button>

    <template v-if="list.length >0">
      <ul>
      <li v-for="(item, index) in list" :key="index" @click="a(item)">
       
       <div class="left">
         <img :src="item.author.avatar_url" class="g">
          {{ item.title }} 【{{navTitle}}】
         </div> 
         <div>
            {{item.create_at |timeStrFilter}}
         </div>
          <div class="right">
            <span>评论({{item.reply_count}})</span>
              <span>阅读({{item.visit_count}})</span>
          </div>
      </li>
    </ul>
    <div>
      <button v-if="page > 1" @click="goPage(-1)">上一页</button>
      第{{ page }}页
      <button @click="goPage(1)">下一页</button>
    </div>
    </template>
  <div v-else>
   <img src="../assets/jia.gif" alt="">
  </div>
    
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      activeName: "good",
      page: 1,
      navs: [
        { title: "精华", tab: "good" },
        { title: "问答", tab: "ask" },
        { title: "分享", tab: "share" },
        { title: "招聘", tab: "job" },
      ]
    }
  },
  
  created() {
    this.getData()
  },
  computed: {
    navTitle() {
      let title;
      this.navs.forEach(item => {
        if (item.tab === this.activeName) {
          title = item.title;
        }
      });
      return title;
    },
  },
  methods: {
    getData() {
      this.$axios.get("https://cnodejs.org/api/v1/topics", {
          params: {
            page: this.page,
            tab: this.activeName,
          }
        }).then(res=> {
          this.list = res.data.data
        })
    },
    a(item) {
      this.$router.push({
        path: "/detail",
        query: {
          id: item.id,
        }
      })
    },
    changeNav(item) {
      this.activeName = item.tab
      this.getData()
    },
    goPage(page) {
      this.page += page
      this.getData()
    }
  }
};
</script>

<style scoped>
ul {
  list-style: none;
}
li{
  padding:20px;
  display: flex;
  justify-content: space-between;
}
li:hover {
  color: red;
}
button {
  border: 0px;
  margin: 10px;
  padding: 8px 15px;
  cursor: pointer;
  background: #fff;
}
.g{
width:30px;
height:30px;
border-radius: 50%;
margin-right:10px;
}
.left{
  display: flex;
  align-items:center;
}
.right{
  display: flex;
  align-items:center;
}
</style>